<template>
  <el-container class="main_con" v-if="entry">
    <div class="filter_con">
      <div class="button_area">
        <el-button v-has type="primary" size="medium" @click="drawer = true">
          <i class="el-icon--left el-sc-xinjian"></i>
          新建页面
        </el-button>
      </div>
      <div class="filter_area">
        <!-- <el-input class="serach_input mr_15 mt_15" size="medium" placeholder="页面名称"></el-input>
        <el-button size="medium">搜索</el-button> -->
      </div>
    </div>
    <div class="filter_con" style="margin-top: 20px;height: 100%;">
      <div class="show_page">
        <template v-for="(item, i) in tablist">
          <el-tabs>
            <el-tab-pane v-if="entry.indexOf(2) > -1" label="公众号">
              <div class="show_item" v-if="item.wechat">
                <vimage :src="item.wechat.small_img"></vimage>
                <div class="show_content">
                  <span>{{ item.wechat.page_name }}</span>
                  <span class="time">创建时间：{{ item.wechat.create_time }}</span>
                  <span class="time">修改时间：{{ item.wechat.update_time }}</span>
                  <div class="source">
                    <span>渠道：</span>
                    <i v-if="item.wechat.source.indexOf('2') > -1" class="iconfont el-sc-weixin4"></i>
                    <i v-if="item.wechat.source.indexOf('1') > -1" class="iconfont el-sc-xiaochengxu"></i>
                    <i v-if="item.wechat.source.indexOf('3') > -1" class="iconfont el-sc-h5"></i>
                  </div>
                  <div class="s_btns table_footer">
                    <el-button v-has size="mini" slot="reference" @click="EditHandle(item.wechat)">
                      <i class="el-icon--left el-sc-bianji6"></i>
                      编辑
                    </el-button>
                    <el-button size="mini" slot="reference" @click="preview(item.wechat)">
                      <i class="el-icon--left el-sc-yanjing_xianshi"></i>
                      预览
                    </el-button>
                    <!-- <el-button size="mini">预览</el-button> -->
                  </div>
                </div>
              </div>
              <div class="show_item" v-else><el-tag>未配置该渠道页面</el-tag></div>
            </el-tab-pane>

            <el-tab-pane v-if="entry.indexOf(1) > -1" label="小程序">
              <div class="show_item" v-if="item.wx">
                <vimage :src="item.wx.small_img"></vimage>
                <div class="show_content">
                  <span>{{ item.wx.page_name }}</span>
                  <span class="time">创建时间：{{ item.wx.create_time }}</span>
                  <span class="time">修改时间：{{ item.wx.update_time }}</span>
                  <div class="source">
                    <span>渠道：</span>
                    <i v-if="item.wx.source.indexOf('2') > -1" class="iconfont el-sc-weixin4"></i>
                    <i v-if="item.wx.source.indexOf('1') > -1" class="iconfont el-sc-xiaochengxu"></i>
                    <i v-if="item.wx.source.indexOf('3') > -1" class="iconfont el-sc-h5"></i>
                  </div>
                  <div class="s_btns table_footer">
                    <el-button v-has size="mini" @click="EditHandle(item.wx)">
                      <i class="el-icon--left el-sc-bianji6"></i>
                      编辑
                    </el-button>
                    <el-button size="mini" slot="reference" @click="preview(item.wx)">
                      <i class="el-icon--left el-sc-yanjing_xianshi"></i>
                      预览
                    </el-button>
                  </div>
                </div>
              </div>
              <div class="show_item" v-else>
                <el-tag>未配置该渠道{{ item.name }}</el-tag>
              </div>
            </el-tab-pane>
            <el-tab-pane v-if="entry.indexOf(3) > -1" label="H5">
              <div class="show_item" v-if="item.h5">
                <vimage :src="item.h5.small_img"></vimage>
                <div class="show_content">
                  <span>{{ item.h5.page_name }}</span>
                  <span class="time">创建时间：{{ item.h5.create_time }}</span>
                  <span class="time">修改时间：{{ item.h5.update_time }}</span>
                  <div class="source">
                    <span>渠道：</span>
                    <i v-if="item.h5.source.indexOf('2') > -1" class="iconfont el-sc-weixin4"></i>
                    <i v-if="item.h5.source.indexOf('1') > -1" class="iconfont el-sc-xiaochengxu"></i>
                    <i v-if="item.h5.source.indexOf('3') > -1" class="iconfont el-sc-h5"></i>
                  </div>
                  <div class="s_btns table_footer">
                    <el-button v-has size="mini" slot="reference" @click="EditHandle(item.h5)">
                      <i class="el-icon--left el-sc-bianji6"></i>
                      编辑
                    </el-button>
                    <el-button size="mini" slot="reference" @click="preview(item.h5)">
                      <i class="el-icon--left el-sc-yanjing_xianshi"></i>
                      预览
                    </el-button>
                    <!-- <el-button size="mini">预览</el-button> -->
                  </div>
                </div>
              </div>
              <div class="show_item" v-else><el-tag>未配置该渠道页面</el-tag></div>
            </el-tab-pane>
          </el-tabs>
        </template>
      </div>
    </div>

    <div class="list_con">
      <el-tabs @tab-click="changetab" v-model="type" style="margin-top:10px">
        <el-tab-pane :name="item.type" :label="item.name" v-for="(item, i) in typelist" :key="i">
          <el-table :data="item.list">
            <el-table-column prop="page_name" label="名称"></el-table-column>
            <el-table-column prop="page_type" label="页面类型">
              <template slot-scope="scope">
                <span>{{ item.name }}</span>
              </template>
            </el-table-column>
            <el-table-column label="渠道">
              <template slot-scope="scope">
                <i v-if="scope.row.source.indexOf('2') > -1" class="iconfont el-sc-weixin4"></i>
                <i v-if="scope.row.source.indexOf('1') > -1" class="iconfont el-sc-xiaochengxu"></i>
                <i v-if="scope.row.source.indexOf('3') > -1" class="iconfont el-sc-h5"></i>
              </template>
            </el-table-column>
            <el-table-column prop="status" label="状态">
              <template slot-scope="scope">
                <span>{{ scope.row.status == 1 ? '未应用' : '应用中' }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="create_time" label="创建时间"></el-table-column>
            <el-table-column>
              <template slot-scope="scope">
                <el-button type="text" @click="preview(scope.row)">预览</el-button>
                <el-button v-has style="margin-left: 10px;" type="text" @click="EditHandle(scope.row)">编辑</el-button>
                <el-button v-has type="text" @click="EditStatus(scope.row)">{{ scope.row.status == 1 ? '启用' : '禁用' }}</el-button>
                <el-button v-has type="text" @click="delItem(scope.row.id)" v-if="scope.row.status == 1">删除</el-button>
                <el-popover v-has v-model="scope.row.show" style="margin-left: 10px;" placement="top-start" width="224" trigger="click" content>
                  <el-checkbox-group v-model="scope.row.sources">
                    <el-checkbox v-entry="1" :label="'1'">微信小程序</el-checkbox>
                    <el-checkbox v-entry="2" :label="'2'">微信公众号</el-checkbox>
                    <el-checkbox v-entry="3" :label="'3'">H5</el-checkbox>
                  </el-checkbox-group>
                  <el-button @click="saveSource(scope.row)" type="text">确定</el-button>
                  <el-button type="text" slot="reference">渠道</el-button>
                </el-popover>
              </template>
            </el-table-column>
          </el-table>
          <div class="table_footer" style="justify-content: flex-end;" v-if="item.total != 0">
            <el-pagination @current-change="changePage" class="pages" background hide-on-single-page layout="prev, pager, next" :total="item.total"></el-pagination>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <el-dialog title="选择页面类型" :visible.sync="drawer" destroy-on-close width="500px">
      <div class="list">
        <el-radio-group v-model="pagetype">
          <template v-for="(item, i) in typelist">
            <el-radio :label="item.pagetype">{{ item.name }}</el-radio>
          </template>
        </el-radio-group>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="drawer = false">取 消</el-button>
        <el-button type="primary" @click="showpagedialog = true">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title=""  :visible.sync="dialogTableVisible" width="400px" class="dialog_box">
      <el-tabs stretch>
        <el-tab-pane label="公众号">
          <vue-qr :text="dialogqrcopy" class="qrcopy u-border" style="display:block"></vue-qr>
          <div class="u-flex u-flex-col u-m-t-10">
            <span>{{ dialogqrcopy }}</span>
            <el-button @click="doCopy(dialogqrcopy)" type="text">复制链接</el-button>
          </div>
        </el-tab-pane>
        <el-tab-pane label="小程序">
          <div v-loading='isLoading' class="qrcopy u-flex u-col-center u-row-center u-border">
            <span v-if="!wechatqrcopy" @click="previewwechat" class="btn">点击获取二维码</span>
            <img v-else :src="wechatqrcopy" />
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
    <!-- 二层 -->
    <el-dialog title="选择模板" :visible.sync="showpagedialog" width="1130px" top="50px" custom-class="dialog_box2"><selectmobile :pagetype="pagetype"></selectmobile></el-dialog>
  </el-container>
</template>

<script>
import {pageList, delpage, pagepreview, pageenable, saveSource, getLinkUrl} from '@/api/mall/dndlist';
import vueQr from 'vue-qr';
import selectmobile from '@/components/Selectmobile';
import {mapGetters} from 'vuex';
import {arrUnique} from '@/utils/index.js';
export default {
  data() {
    return {
      list: [],
      url: process.env.VUE_APP_BASE_API,
      bindurl: 'https://www.jingzhe365.com/h5/#/',
      typelist: [
        {
          type: '1',
          name: '商城首页',
          link: 'https://www.jingzhe365.com/h5/#/',
          page: 1,
          list: [],
          pagetype: '1'
        },
        {
          type: '2',
          name: '商品详情',
          link: 'https://www.jingzhe365.com/h5/#/pages/detail/detail?id=190',
          page: 1,
          list: [],
          pagetype: '2'
        },
        {
          type: '3',
          name: '个人中心',
          link: 'https://www.jingzhe365.com/h5/#/pages/mine/mine',
          page: 1,
          list: [],
          pagetype: '3'
        },
        {
          type: '4',
          name: '自定义页面',
          link: 'https://www.jingzhe365.com/h5/#/pages/custompage/custompage',
          page: 1,
          list: [],
          pagetype: '4'
        }
      ],
      tablist: [
        {
          name: '首页',
          h5: null,
          wx: null,
          wechat: null
        },
        {
          name: '商品详情',
          h5: null,
          wx: null,
          wechat: null
        },
        {
          name: '个人中心',
          h5: null,
          wx: null,
          wechat: null
        }
      ],
      isLoading: false,
      drawer: false,
      type: '1',
      pagetype: '1',
      uselist: [],
      page: 1,
      total: 0,
      dialogTableVisible: false,
      dialogqrcopy: '',
      showpagedialog: false,
      wechatqrcopy: '',
      vlue: {}
    };
  },
  components: {
    vueQr,
    selectmobile
  },
  mounted() {
    this.getlist();
    this.gettoplist();
  },
  computed: {
    ...mapGetters(['entry'])
  },
  methods: {
    changetab(e) {
      this.getlist(true);
    },
    //切换分页
    changePage(page) {
      this.typelist[this.type - 1].page = page;
      this.getlist(true);
    },
    //获取列表数据
    getlist(mytype) {
      this.isLoading = true;

      var data = {
        page: this.typelist[this.type - 1].page,
        size: 10,
        page_type: this.type
      };
      pageList(data, this.typelist[this.type - 1].page, 10).then(res => {
        var o = res.msg;
        let list = o.data;
        list.forEach(a => {
          let sources = a.source.split(',');
          a.sources = arrUnique(sources);
          a.show = false;
        });
        this.typelist[this.type - 1].list = list;
        this.typelist[this.type - 1].total = o.total;
        // if (!mytype) {
        //   this.gettoplist();
        // }
      });
    },
    doCopy(orderNo) {
      this.$copyText(orderNo).then(
        res => {
          //this.$alert('复制成功');
          this.$message({
            message: '复制成功',
            type: 'success',
            duration: 2000
          });
        },
        error => {
          this.$alert('无法复制');
        }
      );
    },
    //添加新页面
    addPage() {
      this.$router.push({
        path: '/dndlist',
        query: {
          type: this.pagetype
        }
      });
      this.drawer = false;
    },
    //编辑
    EditHandle(data) {
      this.$router.push({
        path: '/dndlist',
        query: {
          type: data.page_type,
          id: data.id
        }
      });
    },
    //删除数据
    delItem(id) {
      this.$confirm('是否要删除该条数据?')
        .then(_ => {
          this.isLoading = true;
          delpage({id: id})
            .then(res => {
              this.isLoading = false;
              //重新加载数据
              this.getlist();
            })
            .catch(e => {
              this.isLoading = false;
            });
        })
        .catch(_ => {
          //empty
        });
    },
    //启用or禁用
    EditStatus(item) {
      let data = {
        id: item.id,
        status: item.status == 1 ? 2 : 1
      };
      pageenable(data).then(res => {
        this.getlist();
      });
    },
    //修改渠道
    saveSource(item) {
      if (item.sources.length == 0) {
        this.$message.error({
          message: '至少选择一个渠道',
          type: 'success',
          duration: 2000
        });
        return false;
      }
      let data = {
        data: []
      };
      item.sources.sort((a, b) => {
        return Number(a) - Number(b);
      });
      data.data.push({
        id: item.id,
        source: item.sources.join(',')
      });
      saveSource(data).then(res => {
        item.show = false;
        this.getlist();
        this.gettoplist();
      });
    },
    gettoplist() {
      let data = {
        page: 1,
        size: 20
      };
      pageList(data, 1, 20).then(res => {
        this.isLoading = false;
        var o = res.msg;
        let list = o.data;
        list.forEach(a => {
          a.sources = a.source.split(',');
          a.show = false;
        });
        let uselist = list.filter(a => {
          return a.status == 2 && a.page_type != 4;
        });
        this.tablist.forEach((a, i) => {
          let t = i + 1;
          let list = uselist.filter(b => b.page_type == t);
          let wx = list.filter(c => c.source && c.source.indexOf('1') > -1);
          let h5 = list.filter(c => c.source && c.source.indexOf('3') > -1);
          let wechat = list.filter(c => c.source && c.source.indexOf('2') > -1);
          a.wx = wx.length > 0 ? wx[0] : null;
          a.h5 = h5.length > 0 ? h5[0] : null;
          a.wechat = wechat.length > 0 ? wechat[0] : null;
        });
        this.uselist = uselist;
        this.isLoading = false;
      });
    },
    preview(vlue) {
      if(this.vlue&&vlue.id!=this.vlue.id){
        this.vlue = vlue;
        this.wechatqrcopy=''
      }

      if (this.entry.indexOf(2) > -1 || this.entry.indexOf(3) > -1) {
        let data = {
          id: vlue.id
        };
        getLinkUrl(data).then(res => {
          this.dialogqrcopy = res.msg.link;

          this.dialogTableVisible = !this.dialogTableVisible;
        });
      }
    },
    previewwechat() {
      if (this.entry.indexOf(1) > -1) {
        this.isLoading=true
        let data = {
          id: this.vlue.id,
          user_type: 1,
          n_load:1
        };
        getLinkUrl(data).then(res => {
          this.wechatqrcopy = res.msg.link;
          this.isLoading=false
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.filter_con {
  align-items: flex-start;
}
.list {
  display: flex;
  .item {
    display: flex;
    width: 50px;
    height: 50px;
  }
}
.sourceimg {
  width: 30px;
  height: 30px;
  margin-right: 10px;
}
.show_page {
  width: 100%;
  display: flex;
  justify-content: space-around;
  .el-tabs {
    padding-bottom: 18px;
    box-shadow: 0px 0px 13px 0px rgba(46, 104, 234, 0.2);
    border-radius: 10px;
    flex: 1;
    ::v-deep .el-tabs__nav {
      margin-left: 18px;
      .el-tabs__item {
        font-weight: bolder;
      }
    }
  }
  .el-tabs:nth-child(2) {
    margin: 0 16px;
  }
  .show_item {
    // min-width: 340px;
    display: flex;
    border-radius: 2px;
    box-shadow: 0px 1px 4px rgba(133, 148, 162, 0.2);
    flex-wrap: nowrap;
    padding: 10px 0 10px 10px;
    align-items: flex-start;
    img {
      width: 40%;
      // box-shadow: 0px 0px 13px 0px rgba(46, 104, 234, 0.2);
    }
    .show_content {
      padding: 0 20px;
      display: flex;
      flex-direction: column;
      // position: relative;
      .s_btns {
        display: flex;
        justify-content: space-between;
        position: absolute;
        bottom: 0;
        .el-button:first-child {
          margin-right: 20px;
        }
        // width: 100%;
        // padding: 0 40px;
      }
      .time {
        font-size: 12px;
        margin-top: 12px;
      }
      .source {
        display: flex;
        align-items: center;
        margin-top: 12px;
        font-size: 12px;
        .iconfont {
          font-size: 20px;
          // width: 20px !important;
          // height: 20px;
          margin-right: 6px;
        }
      }
    }
  }
}
.list_con {
  .iconfont {
    font-size: 24px;
    color: #333;
    margin-left: 15px;
  }
}
.dialog_box {
  min-width: 300px;
  margin: auto;
}
.qrcopy {
  height: 200px;
  width: 200px;

  margin: auto;
  img{
    height: 200px;
    width: 200px;
  }
  .btn{
    cursor: pointer;
  }
}

.disf {
  display: flex;
  justify-content: space-between;
  align-content: center;
  padding: 0 20px;
  span {
  }
}
/deep/.el-dialog.dialog_box2 {
  .el-dialog__body {
    padding-top: 0;
  }
}
</style>
